<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width: 240px;" v-model="departmentStore.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="departmentStore.getLoad">查 询</el-button>
      <el-button type="warning" @click="departmentStore.reset">重 置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-button type="primary" @click="departmentStore.handleAdd">新 增</el-button>
      <el-button type="danger" @click="departmentStore.deleteBatch">批量删除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">
      <el-table stripe :data="departmentStore.options" strip @selection-change="departmentStore.handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="名称" prop="name" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
              <el-button style="vertical-align: middle" type="primary" :icon="Edit" circle @click="departmentStore.handleUpdate(scope.row)"></el-button>
              <el-button style="vertical-align: middle" type="danger" :icon="Delete" circle @click="departmentStore.handleDelete(scope.row.id)"></el-button>
            </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <el-pagination
        @change="departmentStore.getLoad"
        v-model:current-page="departmentStore.pageNum"
        v-model:page-size="departmentStore.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="departmentStore.total"
      />
    </div>
    <el-dialog v-model="departmentStore.formVisible" title="员工信息" width="500" destroy-on-close>
      <el-form ref="formRef" :rules="rules" :model="departmentStore.form" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="departmentStore.form.name" autocomplete="off" placeholder="请输入账号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="departmentStore.formVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useDepartmentStore } from '@/store/departmentStore';
import { onMounted, ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
const departmentStore = useDepartmentStore();
const formRef = ref();

// 表单校验规则
const rules = {
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ]
};
// 保存操作
const handleSave = () => {
  departmentStore.save(); // 调用 store 中的保存方法
};

onMounted(() => departmentStore.getLoad());
</script>